const { resolve } = require('path')
// 自动在build中生成index.html文件的插件
const HtmlPlugin = require('html-webpack-plugin')
// 这个插件用于克隆文件
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // path决定了打包之后的文件夹的位置
    path: resolve(__dirname, '../build'),
    // 打包之后js文件的名称
    filename: './js/build.js',
    clean: true, //每次打包删除build中的文件,然后再生成
    publicPath: '/',
  },
  mode: 'production',
  plugins: [
    new HtmlPlugin({
      template: './public/index.html',
    }),
    // 因为favicon并没有在index.js中引入.所以webpack默认不会处理.所以使用插件复制public/favicon.ico到build中.
    new CopyPlugin({
      patterns: [
        {
          from: 'public',
          to: resolve(__dirname, '../build'),
          globOptions: {
            // htmlplug已经处理过index.html了. copyplug不要再处理index.html,否则无法打包
            ignore: ['**/index.html'],
          },
        },
      ],
    }),
  ],
  module: {
    rules: [
      // 编译代码中的ejs模板
      {
        test: /\.ejs$/,
        loader: 'ejs-loader',
        options: {
          variable: 'data', // 可以在模板当中使用 data 进行动态渲染. 这个值可以自定义.比如:xxx
          // interpolate: '\\{\\{(.+?)\\}\\}', // 表示使用 {{}} 语法. 我们这里不需要
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.json', '.ejs'], // 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
    alias: {
      // z: resolve(__dirname, '../src/xxx/yyy/zzz'),
      t: resolve(__dirname, '../src/templates'),
    },
  },
}
